<script setup>
import dayjs from 'dayjs'
import { inject, reactive, ref } from 'vue'

import { fetchAlertDeviceData } from '@/api/manager/dataManage/deviceManage.js'

const emit = defineEmits(['close'])

const parkList = inject('parkList')

const parkId = ref('')

const title = ref('报警事件')

const tableLoading = ref(false)

const searchParams = reactive({
  pageIndex: 1,
  pageSize: 15,
})

const tableData = ref([])

const total = ref(0)

const onClose = () => {
  emit('close')
  searchParams.pageIndex = 1
  tableData.value = []
}

const setParkId = (id) => {
  parkId.value = id
  if (parkId.value) {
    const park = parkList.value.find((item) => item.id === parkId.value)
    if (park) {
      title.value = `${park.name} - 报警事件`
    } else {
      title.value = '报警事件'
    }
  } else {
    title.value = '报警事件'
  }

  fetchData()
}

const fetchData = () => {
  tableLoading.value = true
  fetchAlertDeviceData({
    ...searchParams,
    parkId: parkId.value || undefined,
  })
    .then((res) => {
      total.value = res.count
      tableData.value = res.list
    })
    .finally(() => {
      tableLoading.value = false
    })
}

const handleSizeChange = (size) => {
  searchParams.pageIndex = 1
  searchParams.pageSize = size
  fetchData()
}

const handlePageChange = (page) => {
  searchParams.pageIndex = page
  fetchData()
}

defineExpose({
  setParkId,
})
</script>

<template>
  <div class="alarm-event">
    <div class="alarm-event-content">
      <div class="content-header">
        <span class="title">{{ title }}</span>
        <div class="close" @click="onClose"></div>
      </div>

      <div class="content-main">
        <el-table
          v-loading="tableLoading"
          element-loading-background="#31668c66"
          class="dark-table"
          :data="tableData"
          show-overflow-tooltip
          :tooltip-options="{ showAfter: 300 }"
        >
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="content" label="报警内容" />
          <el-table-column fixed="right" label="报警时间" width="160px">
            <template #default="scope">
              {{
                dayjs(scope.row.timestamp).isValid()
                  ? dayjs(scope.row.timestamp).format('YYYY-MM-DD HH:mm:ss')
                  : ''
              }}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="dark-pagination"
          :current-page="searchParams.pageIndex"
          :page-size="searchParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" src="@/assets/styles/common.scss"></style>
<style scoped lang="scss">
.alarm-event {
  z-index: 3333;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;

  &-content {
    width: 970px;
    height: 650px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/dispatch_bg.png');
    position: relative;

    .content-header {
      position: absolute;
      left: 25px;
      top: 38px;
      right: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        padding: 0 4px;
        font-size: 20px;
        font-weight: 400;
        font-family: YouSheBiaoTiHei;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .close {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/imgs/ic_gb_dialog.png');
        cursor: pointer;
      }
    }

    .content-main {
      width: 100%;
      height: 100%;
      padding: 90px 30px 40px;
      display: flex;
      flex-direction: column;

      .el-table {
        flex: 1;
      }

      .el-pagination {
        margin-top: 16px;
        align-self: flex-end;
      }
    }
  }
}
</style>
